<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>IdTabs - Demo.html</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<script type="text/javascript" src="../jquery1.4.2.js"></script>
		<script type="text/javascript" src="jquery.idTabs.min.js"></script>
		<style type="text/css">
			/*主容器*/ 
			.usual { 
				background:#cee; color:#111; padding:15px 20px;
				width:500px; border:1px solid #099; margin:8px auto; 
			} 
			/*选项卡*/ 
			.usual ul {
				margin:0; padding:0; padding-left:2em; overflow:auto;/*火狐等清理浮动*/
				_display:inline-block;/*ie6清理浮动*/ 
			}
			.usual li { 
				list-style:none;
				float:left;
			} 
			.usual ul a { 
				display:block; padding:6px 10px;
				text-decoration:none; font:12px Arial; 
				color:#FFF; background:#22A4C4;
				outline:none; 
			} 
			.usual ul a:hover { color:#FFF; background:#0B718B; }
			.usual ul a.selected { color:#000; background:snow; cursor:default; }
			/*tab页*/ 
			.usual div {
				padding:10px 10px 8px 10px; background:snow;
				font:10pt Arial; 
			}
		</style>
	</head>
	<body>
		<div class="usual">
			<ul class="idTabs">
				<li><a class="selected" href="#tab1">教育</a></li>
				<li><a href="#tab2">儿童</a></li>
				<li><a href="#tab3">育儿</a></li>
			</ul>
			<div id="tab1">金融危机致使校园招聘减少sdfsfsfsfsdfsfs..金融危机致使校园招聘减少sdfsfsfsfsdfsfs.金融危机致使校园招聘减少sdfsfsfsfsdfsfs..</div>
			<div id="tab2">青少年网上普法大赛sdfsdfdsfsdfs.sf..</div>
			<div id="tab3">今天你为宝宝许愿了吗.fsfsfsfdsdffs..	</div>
		</div>
	</body>
</html>
